<template>
  <form style="text-align: center; width: 480px; margin: 300px auto 0">
    <div>
      <label for="username">用户名:</label>
      <input id="username" placeholder="用户名/手机号/邮箱">
    </div>
    <div>
      <label for="password">密码:</label>
      <input id="password" placeholder="密码">
    </div>
    <my-slider-captcha @complete="onComplete" :success="success" ref="mySliderCaptcha" />
  </form>
<!--  -->
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import MySliderCaptcha from "@/components/MySliderCapthca/MySliderCaptcha.vue";
import axios from "axios";
import PointInfo from "@/components/SliderCaptcha/PointInfo";

export default defineComponent({
  name: "App",
  components: {MySliderCaptcha},
  setup: () => {
    const mySliderCaptcha = ref();
    const success = ref(false);
    const onComplete = (result: number, dragPath: PointInfo[]) => {
      console.log(dragPath);
      axios.get("/test", {
        params: {x: result}
      })
          .then(()=>{
            console.log("验证通过!");
            success.value = true;
          })
          .catch(()=>{
            console.log("验证失败");
            mySliderCaptcha.value.refresh();
          });
    }
    return {onComplete, mySliderCaptcha, success}
  }
})
</script>

<style scoped>

</style>
